<script>
import { defineComponent } from 'vue';
import { uid } from 'quasar';
import { useNodeTreeStore } from 'src/stores/nodeTree';
// import { VueDraggable } from 'vue-draggable-plus';
import { cloneDeep } from 'lodash-es';
export default defineComponent({
  name: 'ComponentTree',
  // components: { VueDraggable },
  setup() {
    const nodeTreeStore = useNodeTreeStore();
    const clone = (item) => {
      const clo = cloneDeep(item);
      clo.id = uid();
      return clo;
    };
    const end = (e) => {
      console.log(e);
    };
    const dragstart = (item, event) => {
      event.dataTransfer.dropEffect = 'copy';
      nodeTreeStore.setFrom(item);
      nodeTreeStore.setPullMode('copy');
      nodeTreeStore.recordSnapshot();
    };
    const dragend = (event) => {
      event.preventDefault();
      nodeTreeStore.setPullMode('false');
      nodeTreeStore.setFrom(null);
    };
    const drag = (event) => {
      event.preventDefault();
    };
    return {
      nodeTreeStore,
      clone,
      end,
      dragstart,
      dragend,
      drag,
    };
  },
});
</script>
<template>
  <div>
    <div v-for="group in nodeTreeStore.componentTree" :key="group.id">
      <q-item-label header>{{ group.label }}</q-item-label>
      <div class="group-list">
        <q-card
          @dragstart.stop="dragstart(item, $event)"
          @dragend="dragend"
          draggable="true"
          :data-type="item.type"
          v-for="item in group.children"
          :key="item.id"
          clickable
          class="drag-area"
          flat
          bordered
          tabindex="-1"
        >
          <q-card-section>
            <q-avatar text-color="white" class="tw-bg-gray-500" size="24px">
              {{ item.icon }}
            </q-avatar>
            <p>{{ item.label }}</p>
          </q-card-section>
        </q-card>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.group-list {
  display: grid;
  row-gap: 10px;
  column-gap: 10px;
  grid-template-columns: repeat(auto-fit, 80px);
  // justify-content: space-between;
  // flex-wrap: wrap;
  .drag-area {
    // width: 100px;
    min-height: 50px;
    text-align: center;
    cursor: grab;
    &:active {
      cursor: grabbing;
    }
  }
}
</style>
